<!-- StudyCreatTeam.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>创建小组</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" href="../../css/weui.min.css">
		<link rel="stylesheet" href="../../css/jquery-weui.min.css">
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			.base_right_item{
				text-align: center;
				font-size: 14px;
			}
			.plan-table-view{
				background-color: #f3f5f7;
			}
			.plan-cell{
				background-color: white;
				margin-bottom: 8px;
			}
			.plan-cell .cell-p{
				margin: 0;
				font-size: 14px;
				line-height: 30px;
				color: #333;
			}
			.plan-cell .cell-left-div{
				width: 100px;
				height: 30px;
				float: left;
			}
			.plan-cell .cell-right-div{
				margin-left: 100px;
				height: 30px;
			}
			input[type=text]{
				border: none;
				margin: 0;
				padding: 0;
				height: 30px;
				font-size: 14px;
				color: #333;
			}
			.time-input{
				font-size: 14px;
				line-height: 30px;
				height: 30px;
				color: #333;
			}
			.cell-div{
				padding: 10px;
			}
			.top-div{
				position:relative;
			}
			.top-icon{
				width: 20px;
				position: absolute;
				top: 0px;
				left: 0px;
			}
			.top-title{
				color: #333;
				font-size: 14px;
				margin-left: 30px;
			}
			.input-div{
				background-color: white;
				margin-top: 10px;
				padding: 3px 10px;
				height: 36px; 
				border-radius: 2px;
				position: relative;
			}
			.select-num-title{
				color: #666;
				font-size: 14px;
				height: 30px;
				margin: 0;
				line-height: 30px;
				margin-right: 20px;
			}
			.arrow-right-icon{
				width: 18px;
				position: absolute;
				top: 8px;
				right: 4px;
			}
		</style>
	</head>
	<body>
		<div class="base_style_color " id='BarAppearance' style="height: 22px;width: 100%"></div>
		<div class="base_navigation_bar base_style_color base_navigation_item_bar">
			<a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon" src="../../image/icon_jiantou.png" alt=""> </a>
			<span>创建小组</span>
			<a class="base_right_item nav-item" href="#" onclick="onSaveClick()">
				完成
			</a>
		</div>
		<div class="base_content_div">
			<div class="cell-div">
				<div class="top-div">
					<img class="top-icon" src="../../image/icon_plan_edit.png">
					<span class="top-title">
						请创建您的小组名称
					</span>
				</div>
				<div class="input-div">
					<input id="team_name" class="team-input" type="text" name="">
				</div>
			</div>
			<div class="cell-div">
				<div class="top-div">
					<img class="top-icon" src="../../image/icon_plan_people.png">
					<span class="top-title">
						请选择小组成员
					</span>
				</div>
				<div class="input-div" onclick="onSelectStuClick()">
					<p class="select-num-title">
						已选<span id="stu_num">0</span>名同学
					</p>
					<img class="arrow-right-icon" src="../../image/arrow_right.png">
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript">
		var currentTeamId = "0";
		var currenttype = 'creat';//默认创建模式
		var teamStuArr = new Array();
		var currentTeamName = '';
		apiready = function() {
			prepareData();
			setupNotifi();
		}
		function prepareData(){
			currenttype = api.pageParam.currenttype;
			if (currenttype == 'edit') {//编辑模式 等于'creat'为创建模式
				currentTeamId = api.pageParam.id;
				var teamName = api.pageParam.names;
				currentTeamName = teamName;
				$('#team_name').val(teamName);
				var teamuser = api.pageParam.teamuser;
				if (teamuser != null && teamuser.constructor == Array && teamuser.length > 0) {
					teamStuArr = teamuser;
					$('#stu_num').text(teamuser.length);
				}
			}
		}
		function setupNotifi(){
			api.addEventListener({
			    name: 'addPlanTeamStuNotifi'
			}, function(ret, err) {
				var addStuArr = ret.value.data;
				if (addStuArr != null && addStuArr.constructor == Array) {
					teamStuArr = teamStuArr.concat(addStuArr);
					$('#stu_num').text(teamStuArr.length);
				}
			});
			api.addEventListener({
			    name: 'delUserSuccessNotifi'
			}, function(ret, err) {
			    var stuArr = ret.value.stuArr;
			    if (stuArr != null && stuArr.constructor == Array) {
			    	teamStuArr = stuArr;
					$('#stu_num').text(teamStuArr.length);
				}
			});
		}
		function backClick() {
			api.closeWin();
		}
		function onSaveClick() {
			if (currenttype == 'edit') {
				if (currentTeamName != $('#team_name').val()) {
					editTeamName();
				}else{
					backClick();
				}
			}else{
				if (currentTeamName != $('#team_name').val()) {
					creatTeam(function(){
						backClick();
					});
				}else{
					backClick();
				}
			}
		}
		function onSelectStuClick(){
			if (currentTeamId == "0") {//未创建小组
				creatTeam(function(){
					pushToSelectStu();
				});
			}else{
				pushToSelectStu();
			}
		}
		function pushToSelectStu() {
			// api.openWin({useWKWebView:true,
			//     name: 'StudyCreatPlan_SelectStu_Win',
			//     url: 'StudyCreatPlan_SelectStu_Win.html',
			//     pageParam: {
			//         type : 1,//学生 0 全部 1 学生 2老师
			//         pid : api.pageParam.pid,
			//         tid : currentTeamId
			//     }
			// });
			api.openWin({useWKWebView:true,
			    name: 'StudyPlanUserList_Win',
			    url: 'StudyPlanUserList_Win.html',
			    pageParam: {
			        type : 1,//学生
			        pid : api.pageParam.pid,
			        tid : currentTeamId,
			        teamStuArr : teamStuArr
			    }
			});
		}
		function editTeamName(){
			var team_name = $('#team_name').val();
			if (team_name == '' || team_name == null) {
				api.toast({
				    msg: '请输入小组名称'
				});
				return;
			}
			api.showProgress({
			    style: 'default',
			    animationType: 'fade',
			    title: '',
			    text: '创建小组中请稍后...',
			    modal: true
			});
			var params = {
				pid : api.pageParam.pid,
				jid : $api.getStorage('cfnetppjxid'),
				uid : $api.getStorage('cfnetppuid'),
				id : currentTeamId,
				names : team_name
			};
			cfnetppPOST(url_editPlanTeamName, params, false, function(data, status){
				api.hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						api.toast({
						    msg: '修改小组名称成功'
						});
						api.sendEvent({
						    name: 'planTeamListRefreshNotifi'
						});
						backClick();
					}else{
						api.toast({
						    msg: '修改小组名称失败'
						});
					}
				}else{
					api.toast({
					    msg: '修改小组名称失败'
					});
				}
			});
		}
		function creatTeam(callback){
			var team_name = $('#team_name').val();
			if (team_name == '' || team_name == null) {
				api.toast({
				    msg: '请输入小组名称'
				});
				return;
			}
			api.showProgress({
			    style: 'default',
			    animationType: 'fade',
			    title: '',
			    text: '创建小组中请稍后...',
			    modal: true
			});
			var instime = (new Date()).valueOf();
			var params = {
				pid : api.pageParam.pid,
				jid : $api.getStorage('cfnetppjxid'),
				instime : instime,
				names : team_name
			};
			cfnetppPOST(url_addPlanTeam, params, false, function(data, status){
				api.hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						currentTeamId = data.data.id;
						api.sendEvent({
						    name: 'creatTeamSucceedNotifi',
						    extra: {
						        timeId: currentTeamId
						    }
						});
						api.toast({
						    msg: '创建小组成功'
						});
						currentTeamName = team_name;
						callback();
					}else{
						api.toast({
						    msg: '创建小组失败请重试'
						});
					}
				}else{
					api.toast({
					    msg: '创建小组失败请重试'
					});
				}
			});
		}
	</script>
</html>